<template>
  <div class="home">
    <el-container class="home-container">
      <el-header class="home-header">
        <el-row>
          <el-col :span="4">
            <div class="grid-content bg-purple GDOU" @click="openClose" title="收起/展开菜单">
                <i class="el-icon-s-fold"></i>
                <span>&nbsp;&nbsp;广东海洋大学</span>
            </div>
          </el-col>
          <el-col :span="19">
            <div class="grid-content bg-purple-light">工程教育专业认证信息管理系统</div>
          </el-col>
          <el-col :span="1">
            <a class="grid-content active" @click="exit()">
            <span>退出</span>
            <i class='el-icon-d-arrow-right'></i>
            </a>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside
        width="220px"
        class="home-aside"
        id="menuClass">
         <!-- 开启路由模式 -->
          <el-menu
            :default-active="activeNAv"
            class="el-menu-vertical-demo"
            :router="true"
            :unique-opened="true"
            :collapse="isCollapse"
            :collapse-transition="false"
          >
            <el-menu-item index="student">
                <i class="el-icon-user"></i>
                <span slot="title">学生管理</span>
            </el-menu-item>
            <el-menu-item index="class">
                <i class="el-icon-suitcase-1"></i>
                <span slot="title">班级管理</span>
            </el-menu-item>
            <el-menu-item index="course">
                <i class="el-icon-s-order"></i>
                <span slot="title">课程管理</span>
            </el-menu-item>
            <el-menu-item index="schedule">
                <i class="el-icon-date"></i>
                <span slot="title">课程安排管理</span>
            </el-menu-item>
            <el-menu-item index="assessment">
                <i class="el-icon-monitor"></i>
                <span slot="title">课程考核方式管理</span>
            </el-menu-item>
            <el-menu-item index="graduation">
                <i class="el-icon-document-copy"></i>
                <span slot="title">毕业要求管理</span>
            </el-menu-item>
            <el-menu-item index="result">
                <i class="el-icon-edit-outline"></i>
                <span slot="title">成绩管理</span>
            </el-menu-item>
            <el-menu-item index="courseDegree">
              <i class="el-icon-pie-chart"></i>
              <span slot="title">课程目标达成度管理</span>
            </el-menu-item>
            <el-menu-item index="graduationDegree">
              <i class="el-icon-data-analysis"></i>
              <span slot="title">毕业要求达成度管理</span>
            </el-menu-item>
            <el-menu-item index="user">
                <i class="el-icon-s-custom"></i>
                <span slot="title">用户管理</span>
            </el-menu-item>
             <el-menu-item index="role">
                <i class="el-icon-setting"></i>
                <span slot="title">权限管理</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main class="home-main">
          <keep-alive>
            <router-view v-if="$route.meta.keepAlive"></router-view>
          </keep-alive>
            <router-view v-if="!$route.meta.keepAlive"></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'home',
  data () {
    return {
      activeNAv: 'student',
      isCollapse: false
    }
  },
  components: {},
  mounted () {
    var _this = this
    var href = window.location.href
    href = href.split('/#/')[1]
    _this.activeNAv = href
  },
  methods: {
    // 退出
    exit () {
      this.$confirm('确定退出?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const token = sessionStorage.getItem('token')
        this.$http.defaults.headers.common['token'] = token
        // 后台token的key是token
        this.$http.defaults.headers.post['Content-Type'] = 'application/json'
        this.$http.defaults.headers.post['Accept'] = 'application/json'
        const res = await this.$http.post('logout', token)
        if (res.data.code === 200) {
          sessionStorage.clear()
          this.$router.push({name: 'login'})
          this.$message({
            type: 'success',
            message: '退出成功!'
          })
        } else {
          this.$http.warning(res.data.msg)
        }
      }).catch(() => {
        // this.$message({
        //   type: 'info',
        //   message: '已取消退出'
        // })
      })
    },
    // 打开关闭菜单
    openClose () {
      // console.log(123)
      this.isCollapse = !this.isCollapse
      var menuWidth = document.getElementById('menuClass')
      console.log(menuWidth.offsetWidth)
      if (menuWidth.offsetWidth === 220) {
        menuWidth.style.width = '64px'
        console.log(1)
      } else {
        console.log(2)
        menuWidth.style.width = '220px'
      }
    }
  },
  beforeCreate () {
  // 获取token
    const token = sessionStorage.getItem('token')
    // console.log(token)
    if (!token) {
      // token没有则->登录
      this.$router.push({name: 'login'})
    }
    // if token存在->继续渲染
  }
}
</script>

<style lang="stylus">
@import '~styles/varibles.styl';
.home,.home-container
  height 100%
.home-header
  border-bottom $lineColor solid 1px
  overflow hidden
  background-color #3e5569
.home-aside
  border-right $lineColor solid 1px
.home-main
  background $bgColor url("../../assets/styles/text2.png") no-repeat center
  padding-bottom 0
  overflow-y hidden
.grid-content
  line-height 60px
  color #fff
.bg-purple
  font-size 18px
.bg-purple-light
  text-align center
  font-size 26px
  font-weight 700
.active
  cursor pointer
  padding 5px
.active:hover
  border solid 1px #fff
  border-radius 5px
.el-drawer
  overflow auto
.GDOU
  cursor pointer
</style>
